<script setup lang="ts">
import { QuestionFilled } from '@element-plus/icons-vue';

// 定义props
defineProps({
  // 提示位置，默认右下角
  position: {
    type: String,
    default: 'bottom-right'
  }
});

// 提示内容
const tipItems = [
  { key: 'double-click', text: '双击节点查看详情' },
  { key: 'ctrl-double-click', text: 'Ctrl+双击加载邻居节点' },
  { key: 'right-click', text: '右键菜单展开更多操作' },
  { key: 'mouse-wheel', text: '鼠标滚轮缩放图谱' },
  { key: 'drag', text: '拖拽画布移动视图' }
];

// 默认导出组件
defineOptions({
  name: 'KgTips'
});
</script>

<template>
  <div class="kg-tips" :class="position">
    <el-popover
      placement="top"
      :width="300"
      trigger="hover"
      popper-class="kg-tips-popover"
    >
      <template #reference>
        <div class="tip-icon">
          <el-icon><QuestionFilled /></el-icon>
        </div>
      </template>
      <template #default>
        <div class="tips-content">
          <h4>使用帮助</h4>
          <ul class="tips-list">
            <li v-for="item in tipItems" :key="item.key">
              {{ item.text }}
            </li>
          </ul>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<style scoped lang="scss">
.kg-tips {
  position: absolute;
  z-index: 1000;
  cursor: help;

  &.bottom-right {
    bottom: 20px;
    right: 20px;
  }

  &.top-right {
    top: 20px;
    right: 20px;
  }

  &.bottom-left {
    bottom: 20px;
    left: 20px;
  }

  &.top-left {
    top: 20px;
    left: 20px;
  }

  .tip-icon {
    background: rgba(255, 255, 255, 0.8);
    padding: 8px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;

    &:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .el-icon {
      font-size: 20px;
      color: #409eff;
    }
  }
}

.tips-content {
  h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 500;
    color: #303133;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 8px;
  }

  .tips-list {
    padding-left: 20px;
    margin: 0;

    li {
      margin-bottom: 8px;
      color: #606266;
      list-style-type: disc;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style> 